<template>
	<view v-if="productId">
		<!-- 顶部 -->
		<view class="top-box" @tap="shiftFullScreen">
			<search2 :keyword="keyword" bgColor="rgba(187,187,187,0.1)" @tap.stop></search2>
			<!-- 可以显示当前商品信息 -->
			<image :src="currentProduct.image" class="top-img"></image>
		</view>
		<!-- tabs标签-->
		<view class="tabs-container">
			<up-tabs :list="list" :current="tabsIndex" @click="click" itemStyle="height: 1.8rem; width:15%"
				:inactiveStyle="{ color: '#606266',fontSize: '0.9rem', transform: 'scale(1)' }"
				:activeStyle="{ color: '#303133', fontWeight: 'bold',fontSize: '0.9rem', transform: 'scale(1.05)' }"
				style=" border-radius: 0.63rem 0.63rem 0 0;" lineColor="#303133" lineWidth="60" />
		</view>
		<!-- 可切换的内容 -->
		<scroll-view scroll-y class="scroll-box">
			<view v-show="tabsIndex === 0">
				<view class="introduce-box">
					<!-- 简介 文字点赞部分 -->
					<view class="introduction-box">
						<view class="block-1">
							<view class="block-1-text">
								<!-- 简介 -->
								<view class="text-desc">{{currentProduct.desc}}</view>
								<view class="text-desc">#xiaoma #衣橱</view>
							</view>
							<view style="position: relative;width: 4.88rem;text-align: right;">
								<image src="/static/img/avatar2.png" class="avatar2-style"></image>
								<image src="/static/icon/checked.png" class="icon1-style"></image>
								<view class="block1-name">{{currentProduct.storeName}}</view>
							</view>
						</view>
						<!-- 操作部分 -->
						<view class="block-2">
							<!-- 操作 -->
							<iconRowVue :currentProduct="currentProduct"></iconRowVue>
							<!-- 时间 -->
							<view class="time">2025年2月28日18:07</view>
						</view>
						<!-- 相关发布-->
						<view class="other-title">{{$t('blurb.title.other')}}</view>
					</view>
					<!-- 产品卡片组件 -->
					<view>
						<productCard :rightProducts="rightProducts" :leftProducts="leftProducts"
							@productClick="handleProductClick"></productCard>
					</view>
				</view>
			</view>
			<view v-show="tabsIndex === 1">
				<view class="comment-wrapper">
					<view class="comment-box">
						<comment v-for="item in 5" @shiftReply="showReply"></comment>
						<view class="nothing">{{$t('blurb.comment.nothing')}}</view>
					</view>
					<!-- 评论输入区域固定在底部 -->
					<view class="comment-input-wrapper" v-if="!is_reply">
						<view :class="is_input?'box-style' : ''">
							<view class="title" v-show="is_input">{{$t('blurb.comment.send')}}</view>
							<textarea :value="input" :placeholder="t('blurb.comment.textarea')" auto-blur="true"
								:show-confirm-bar="false" :confirm-type="return" :adjust-position="true" :maxlength="-1"
								:class="is_input?'input-box-style' : 'input-comment'" @click="popCommentBox"
								:cursor-spacing="cursorSpacing" @blur="closeCommentBox"></textarea>
						</view>
					</view>
					<!-- 回复 -->
					<view class="comment-input-wrapper" v-if="is_reply">
						<inputComment :is_reply="is_reply" @closeCommentBox="closeCommentBox"></inputComment>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { useI18n } from 'vue-i18n'
	import { onLoad } from '@dcloudio/uni-app';
	import { Product } from '../../types/types'

	import search2 from '@/pages/home/components/search2.vue'
	import productCard from '@/pages/home/components/productCard.vue'
	import iconRowVue from '../../components/iconRow.vue';
	import comment from '@/pages/blurb/components/comment.vue'
	import inputComment from '@/pages/blurb/components/inputComment.vue';
	type tabListItemType = {
		name : string
	}
	const { t } = useI18n()
	// 定义一个响应式变量来存储商品ID
	const productId = ref('');
	const keyword = ref('')
	const tabsIndex = ref<number>(null)
	const products = ref<Product[]>([
		{
			id: 1,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 1232,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 2,
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 4334,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 3,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 4,
			image: '/static/img/like2.jpg',
			storeName: 'Baby Three',
			likes: 123,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
		{
			id: 5,
			image: '/static/img/like1.jpg',
			storeName: 'Baby Three',
			likes: 888,
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱衣橱'
		},
	]);
	const input = ref<string>(null)
	const replyInput = ref<string>(null)
	const is_input = ref(false)
	const is_reply = ref(false)
	
	const cursorSpacing = ref(90); // 设置光标与键盘的间距
	// 添加左右列数据计算
	const leftProducts = computed(() => {
		return products.value.filter((_, index) => index % 2 === 0)
	})

	const rightProducts = computed(() => {
		return products.value.filter((_, index) => index % 2 === 1)
	})
	const list = ref<Array<tabListItemType>>([
		{ name: t('blurb.tabs.item1') },
		{ name: t('blurb.tabs.item2') },
	])
	// 根据 ID 获取当前商品
	const currentProduct = computed(() => {
		if (productId.value) {
			return products.value.find(item => item.id === Number(productId.value));
		}
		else return null
	});
	// 定义方法
	function click(item : any) {
		tabsIndex.value = item.index
	}
	// 使用 onLoad 钩子接收参数
	onLoad((options) => {
		if (options && options.id) {
			productId.value = options.id;
		}
		if (options.is_comment === 'true') {
			tabsIndex.value = 1
		} else {
			tabsIndex.value = 0
		}
	});
	// 处理子组件传递的事件
	const handleProductClick = (product : Product) => {
		uni.navigateTo({
			url: `/pages/fullScreen/fullScreen?id=${product.id}` // 携带商品 id 跳转
		})
	}
	const shiftFullScreen = () => {
		// uni.navigateBack()
		uni.navigateTo({
			url: '/pages/fullScreen/fullScreen'
		})
	}
	const showReply = () => {
		is_reply.value = true
		is_input.value = false
	}
	const popCommentBox = () => {
		is_input.value = true
		is_reply.value = false
	}
	const closeCommentBox = () => {
		is_input.value = false
		is_reply.value = false
	}
</script>

<style scoped lang="scss">
	.top-box {
		width: 24.56rem;
		height: 12.81rem;
		background-color: rgba(0, 0, 0, 1);
		padding: 0.2rem 0.1rem;
		box-sizing: border-box;
	}

	.top-img {
		width: 9.56rem;
		height: 12.81rem;
		position: absolute;
		top: 0;
		left: 7.5rem;
	}

	.tabs-container {
		position: relative;
		z-index: 10;
	}

	.scroll-box {
		height: calc(100vh - 14.61rem);
		box-sizing: border-box;
		/*padding-bottom: 2rem;*/
	}

	.introduce-box {
		padding: 0.6rem;
		box-sizing: border-box;
	}

	.block-1 {
		display: flex;
	}

	.block-1-text {
		width: 19rem;
		height: 4rem;
		line-height: 2rem;
		font-size: 1.13rem;
		text-align: left;
	}

	.text-desc {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.avatar2-style {
		width: 2.44rem;
		height: 2.44rem;
		margin-right: 0.5rem;
	}

	.icon1-style {
		width: 0.81rem;
		height: 0.81rem;
		position: absolute;
		top: 1.4rem;
		left: 3.5rem;
	}

	.block1-name {
		font-size: 0.75rem;
		font-weight: 600;
	}

	.block-2 {
		display: flex;
		justify-content: space-between;
	}

	.time {
		white-space: nowrap;
		font-size: 0.7rem;
		margin-left: 1rem;
		margin-top: 0.15rem;
	}

	.other-title {
		width: 3.8rem;
		height: 1.25rem;
		line-height: 1.25rem;
		font-weight: 600;
		font-size: 0.88rem;
		text-align: left;
	}

	.comment-wrapper {
		min-height: 100%;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.comment-box {
		flex: 1;
		box-sizing: border-box;
		padding: 0.6rem 0 0;
		background-color: #FFFFFF;
		min-height: calc(100vh - 20rem);
		/* 减去顶部区域和底部输入框的高度 */
	}

	.comment-input-wrapper {
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 0.6rem;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}

	.input-comment {
		width: 95%;
		height: 1.94rem;
		border-radius: 0.94rem;
		background-color: rgba(225, 225, 225, 1);
		color: rgba(136, 136, 136, 1);
		font-size: 0.88rem;
		padding: 0.5rem 1rem;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.box-style {
		width: 100%;
		padding: 0.3rem;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.title {
		width: 3rem;
		height: 1.06rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.75rem;
		text-align: left;
	}

	.input-box-style {
		width: 100%;
		height: 6.25rem;
		padding: 0.5rem 0.5rem 2rem;
		box-sizing: border-box;
		border-radius: 0.63rem;
		background-color: rgba(194, 194, 194, 1);
		font-size: 0.88rem;
		text-align: left;
	}

	.nothing {
		margin: 0.3rem 0 0.8rem;
		height: 1.25rem;
		line-height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: center;
	}
</style>